<template>
    <div class="app-container">
        <el-table :data="kpList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="系列名称" align="center" prop="name"></el-table-column>
            <el-table-column label="系列首图" align="center" prop="picFirst">
                <template slot-scope="scope" width="80px">
                    <el-image :src="scope.row.picFirst" alt="" weight="10" style="width: 80px; height: 80px;"
                        :preview-src-list="srcList" @click="look(scope.row)">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="客片详情" align="center" prop="pic">
                <template slot-scope="scope">
                    <el-image v-for="(item, index) in scope.row.hssyAllPC" :src="item.pic" :key="index" alt=""
                        :preview-src-list="srcList1" @click="look1(scope.row)" weight="20" style="width:60px;">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button @click="updata(scope.row)" type="text" icon="el-icon-edit" size="small">修改</el-button>
                    <el-popconfirm title="是否确认删除所有图片？若删除单张详情图片，请在修改操作下进行" @confirm="handledelete(scope.row)">
                        <el-button slot="reference" type="text" icon="el-icon-delete" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改样片客片对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDialog">
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <el-form-item label="客片名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入系列名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="客片图片" prop="picFirst">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        :show-file-list="false" :on-success="xiugaiSuccess" :before-upload="xiugaiUpload" name="fileName">
                        <img v-if="form.picFirst" :src="form.picFirst" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="详情图片" prop="picc">
                    <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
                        list-type="picture" :file-list="fileList" :on-success="handlePreview" :on-remove="handleRemove"
                        name="fileName">
                        <el-button size="small" type="primary">点击上传详情图片</el-button>
                        <div slot="tip" class="el-upload__tip">详情图片不能低于两张</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="xiugai">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { chakan, updateHSSY, selecOnePCxiangqing, deleteOnePCxiangqing } from "@/api/business/zhuangxiu.js";
import { getToken } from '@/utils/auth'
export default {
    data() {
        return {
            srcList: [],
            srcList1: [],
            fileList: [],
            url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            title: '',
            open: false,
            kpList: [],
            date: {
                typeid: this.$route.query.typeid
            },
            form: {
                pId: '',
                name: '',
                picFirst: '',
                picc: '',
            },
            date1: {
                pId: '',
                ownid: '',
                typeid: this.$route.query.typeid,
            },
            rules: {}
        }
    },
    created() {
        this.getList();
    },
    methods: {
        closeDialog() {
            this.fileList = []
        },
        getList() {
            chakan(this.date).then(response => {
                this.kpList = response.data.data.kepian;
            })
        },
        // 修改
        updata(row) {
            this.form.pId = row.pId;
            selecOnePCxiangqing(this.form).then(response => {
                this.form.name = response.data.data.shuju.name;
                this.form.picFirst = response.data.data.shuju.picFirst;
                this.form.picc = response.data.data.picc;
                response.data.data.shuju.picc.split(',').forEach(item => {
                    let Object = {
                        name: '',
                        url: ''
                    }
                    Object.name = item.slice(item.lastIndexOf('/') + 1);
                    Object.url = item;
                    this.fileList.push(Object)
                })
            })
            this.open = true;
        },
        xiugai() {
            if (this.fileList.length < 2) {
                this.$modal.msgError('详情图片不能低于两张!');
                return false
            } else {
                updateHSSY(this.form).then(response => {
                    this.getList();
                    this.open = false;
                    this.fileList = [];
                    this.form = {
                        pId: '',
                        name: '',
                        picFirst: '',
                        picc: '',
                    }
                })
            }
        },
        // 修改客片图片上传
        xiugaiSuccess(res, file) {
            this.form.picFirst = res.data
        },
        xiugaiUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
        },
        // 修改详情图上传
        handleRemove(file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                if (item.response) {
                    List.push(item.response.data)
                } else {
                    List.push(item.url)
                }
            });
            this.form.picc = List.join(',')
        },
        handlePreview(response, file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                if (item.response) {
                    List.push(item.response.data)
                } else {
                    List.push(item.url)
                }
            });
            this.form.picc = List.join(',');
        },
        cancel() {
            this.open = false
            this.fileList = []
        },
        // 删除
        handledelete(row) {
            this.date1.ownid = row.ownid;
            this.date1.pId = row.pId;
            deleteOnePCxiangqing(this.date1).then(response => {
                this.$modal.msgSuccess(response.data.msg);
                this.getList();
            })
        },
        look(row) {
            this.srcList.push(row.picFirst);
        },
        look1(row) {
            row.hssyAllPC.forEach(item => {
                this.srcList1.push(item.pic);
            })
        }
    }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px solid #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    border: 1px solid #8c939d;
}

.avatar {
    width: 78px;
    height: 78px;
    display: block;
}
</style>